<script setup lang="ts">
import { computed, ref } from 'vue';

import { MdiDownBold, MdiUpBold } from '@vben/icons';

import { CheckCircleFilled, InfoCircleFilled } from '@ant-design/icons-vue';
import { message, Timeline, TimelineItem, Tooltip } from 'ant-design-vue';
import dayjs from 'dayjs';

const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
  type: {
    type: String,
    default: '',
  },
});

// 表单是否展开
const isFormExpand = ref(true);
const isFormExpand2 = ref(true);

// 点击复制内容
const copy = (content: string) => {
  const input = document.createElement('input');
  input.value = content;
  document.body.append(input);
  input.select();
  document.execCommand('copy');
  input.remove();
  message.success('复制成功');
};

// 时间处理
const timeFormat = (date: string) => {
  if (!date) {
    return '';
  }
  try {
    const week = ['日', '一', '二', '三', '四', '五', '六'];
    return `${dayjs(date).format('MM-DD')} (星期${week[dayjs(date).day()]})`;
  } catch (error) {
    console.error('时间格式处理错误：', error);
    return '';
  }
};

const timeFormat1 = (date: string) => {
  if (!date) {
    return '';
  }
  try {
    return dayjs(date).format('YYYY/MM/DD');
  } catch (error) {
    console.error('时间格式处理错误：', error);
    return '';
  }
};
const timeFormat2 = (date: string) => {
  if (!date) {
    return '';
  }
  try {
    return dayjs(date).format('MM/DD HH:mm');
  } catch (error) {
    console.error('时间格式处理错误：', error);
    return '';
  }
};

// 取消的退款金额
const cancelRefundAmount = computed(() => {
  const amount = props.data?.refundPriceList || [];
  return amount.length > 0 ? amount[amount.length - 1] : 0;
});
</script>

<template>
  <div>
    <!-- 修改订单的表单展示 -->
    <div
      v-if="
        data.orderChangeLog &&
        type === 'modify' &&
        ![4].includes(data.applyStatus)
      "
      class="card-box bg-primary/5 mt-4 max-w-[810px] border-none p-4 pt-0"
    >
      <div class="flex items-center justify-between pt-1">
        <div class="flex items-center text-base">
          <InfoCircleFilled class="text-primary mr-3" />
          <span class="font-bold">修改表单</span>
        </div>
        <div
          class="text-primary flex cursor-pointer select-none items-center py-2"
          @click="isFormExpand = !isFormExpand"
        >
          <span class="mr-1">{{ isFormExpand ? '收起' : '展开' }}</span>
          <MdiUpBold v-if="isFormExpand" />
          <MdiDownBold v-else />
        </div>
      </div>
      <template v-if="isFormExpand">
        <div class="mb-2 pl-7">
          订单接受修改，包括不限于取消政策、促销活动等规则均会按新订单执行
        </div>
        <div class="card-box border-none p-4 pt-0">
          <!-- 表头 -->
          <div class="grid grid-cols-3 py-3 pl-5 font-bold">
            <span></span>
            <span>修改前</span>
            <span>修改后</span>
          </div>
          <div class="bg-gray-400/10 py-2 pl-5">
            <ul class="grid grid-cols-3 py-2">
              <li class="opacity-70">总底价（折后）</li>
              <li>{{ data.orderChangeLog?.orgPayAmount || '-' }}</li>
              <li>{{ data.orderChangeLog?.newPayAmount || '-' }}</li>
            </ul>
            <ul class="grid grid-cols-3 py-2">
              <li class="opacity-70">总间夜数</li>
              <li>{{ data.orderChangeLog?.orgNight || '-' }}</li>
              <li>{{ data.orderChangeLog?.newNight || '-' }}</li>
            </ul>
            <ul class="grid grid-cols-3 py-2">
              <li class="opacity-70">离店日期</li>
              <li>{{ data.orderChangeLog?.orgCheckOutDate || '-' }}</li>
              <li>{{ data.orderChangeLog?.newCheckOutDate || '-' }}</li>
            </ul>
          </div>
        </div>
      </template>
    </div>
    <!-- 取消订单的表单展示 -->
    <div
      v-if="
        (type === 'cancel' && data.applyCancelTime) ||
        [4].includes(data.applyStatus)
      "
      class="card-box bg-primary/5 mt-4 max-w-[810px] border-none p-4 pt-0"
    >
      <div class="flex items-start justify-between">
        <div class="flex-auto translate-y-2 pt-2">
          <Timeline>
            <TimelineItem v-if="data.applyStatus === 5">
              <template #dot>
                <CheckCircleFilled class="text-primary" />
              </template>
              <div>
                <p class="text">
                  {{
                    data.isSystemCancel
                      ? '订单已按照取消政策完成取消。（系统自动操作）'
                      : '已同意取消申请。'
                  }}
                </p>
                <p class="text-666">{{ data.cancelTime || '-' }}</p>
              </div>
            </TimelineItem>
            <TimelineItem v-if="data.applyStatus === 6">
              <template #dot>
                <CheckCircleFilled class="text-primary" />
              </template>
              <div>
                <p class="text">已拒绝用户的取消申请。</p>
                <p class="text-666">已操作</p>
              </div>
            </TimelineItem>
            <TimelineItem>
              <div>
                <p class="text">客人申请取消订单，请您尽快处理。</p>
                <p class="text-666">{{ data.applyCancelTime || '-' }}</p>
              </div>
            </TimelineItem>
          </Timeline>
        </div>
        <div
          class="text-primary flex cursor-pointer select-none items-center py-3"
          @click="isFormExpand2 = !isFormExpand2"
        >
          <span class="mr-1">查看详情</span>
          <MdiUpBold v-if="isFormExpand2" />
          <MdiDownBold v-else />
        </div>
      </div>
      <template v-if="isFormExpand2">
        <div class="card-box max-w-[810px] rounded-sm">
          <ul v-if="data.applyStatus === 5" class="flex py-2">
            <li class="min-w-[18%] pl-3 opacity-70">取消费用：</li>
            <li class="flex-auto">
              {{
                cancelRefundAmount > 0 ? `${cancelRefundAmount}CNY` : '免费取消'
              }}
            </li>
          </ul>
          <ul class="flex border-t py-2">
            <li class="min-w-[18%] pl-3 opacity-70">取消原因：</li>
            <li class="flex-auto">{{ data.cancelReason || '-' }}</li>
          </ul>
          <!-- 暂时没有取消类型可判断 -->
          <ul v-if="false" class="flex border-t py-2">
            <li class="min-w-[18%] pl-3 opacity-70">平台说明：</li>
            <li class="flex-auto">
              {{
                data.isSystemCancel
                  ? '根据取消政策，订单已在免费时间段内取消，期待与您的下次合作。'
                  : '虽然我们已经告知客人取消需根据政策收取费用，您会酌情考虑减免订单的取消费用吗？'
              }}
            </li>
          </ul>
          <ul v-if="data.applyStatus === 5" class="flex border-t py-2">
            <li class="min-w-[18%] pl-3 opacity-70">退款说明：</li>
            <li class="flex-auto">
              {{ data.refundReason || '-' }}
            </li>
          </ul>
          <ul v-if="data.applyStatus === 6" class="flex border-t py-2">
            <li class="min-w-[18%] pl-3 opacity-70">拒绝说明：</li>
            <li class="flex-auto pr-3">
              {{ data.refundReason || '-' }}
            </li>
          </ul>
        </div>
      </template>
    </div>

    <!-- 住客信息 -->
    <div class="mt-4 max-w-[810px] border-b border-dashed pb-4">
      <ul class="flex">
        <li class="w-[35%]">
          <p class="mb-1.5 text-xs">客人姓名</p>
          <Tooltip title="点击复制">
            <p
              class="cursor-pointer font-bold hover:bg-gray-100"
              @click="copy(data.contactName)"
            >
              {{ data.contactName }}
            </p>
          </Tooltip>
          <Tooltip title="点击复制">
            <p
              class="cursor-pointer hover:bg-gray-100"
              @click="copy(data.contactPhone)"
            >
              {{ data.contactPhone }}
            </p>
          </Tooltip>
        </li>
        <li class="w-[30%]">
          <p class="mb-1.5 text-xs">可入住人数</p>
          <p class="font-bold">{{ data.maxAdult || 2 }} 人</p>
        </li>
        <li>
          <p class="mb-1.5 text-xs">下单方式</p>
          <p class="font-bold">小程序下单</p>
        </li>
      </ul>
      <ul class="mt-4 flex">
        <li class="w-[35%]">
          <p class="mb-1.5 text-xs">预订客房</p>
          <p class="font-bold">{{ data.roomTypeName || '-' }}</p>
        </li>
        <li class="w-[30%]">
          <p class="mb-1.5 text-xs">间数</p>
          <p class="font-bold">{{ data.roomCount || 1 }} 间</p>
        </li>
        <li>
          <p class="mb-1.5 text-xs">床型</p>
          <p class="font-bold">
            <span
              v-for="(item, index) in data.bedTypeList"
              :key="index"
              class="mr-1"
            >
              {{ item.bedNum || 1 }}张{{ item.bedType }}
            </span>
          </p>
        </li>
      </ul>
      <ul class="mt-4 flex">
        <li class="w-[35%]">
          <p class="mb-1.5 text-xs">住宿日期</p>
          <p class="font-bold">
            {{ timeFormat1(data.checkInDate) }} -
            {{
              timeFormat1(
                type === 'modify' &&
                  data.orderChangeLog &&
                  data.applyStatus !== 1
                  ? data.orderChangeLog?.newCheckOutDate
                  : data.checkOutDate,
              )
            }}
          </p>
        </li>
        <li class="w-[30%]">
          <p class="mb-1.5 text-xs">总间夜数</p>
          <p class="font-bold">
            {{
              type === 'modify' && data.orderChangeLog && data.applyStatus !== 1
                ? data.orderChangeLog?.newNight
                : data.nights || 1
            }}
            晚
          </p>
        </li>
        <li>
          <p class="mb-1.5 text-xs">预计到店时间</p>
          <p class="font-bold">{{ timeFormat2(data.arrivalStartTime) }}</p>
        </li>
      </ul>
    </div>
    <!-- 房价 -->
    <div class="mt-4 max-w-[810px]">
      <div class="text-lg font-bold">房价 (CNY)</div>
      <div
        class="card-box bg-primary/5 mt-2 max-w-[400px] border-none px-3 pb-3 pt-1"
      >
        <p class="flex items-center justify-between py-1.5 pr-2 font-bold">
          <span>订单总金额</span>
          <span class="text-primary">{{ data.totalAmount || '' }}</span>
        </p>
        <p class="text-xs text-gray-400">
          订单总金额=房间每晚平均价格*间夜数*间数
        </p>
      </div>
    </div>
    <!-- 间夜明细 -->
    <div class="bold mt-4 text-lg font-bold">间夜明细</div>
    <div class="card-box mt-2 max-w-[810px] rounded-sm">
      <!-- 表头 -->
      <div class="bg-primary/5 text-666 grid grid-cols-4 py-2 pl-3">
        <span>日期</span>
        <span>预计收入</span>
        <span>餐食</span>
        <span>折扣详情</span>
      </div>
      <div class="text-666">
        <ul
          v-for="(item, index) in data.orderDetailRespList"
          :key="index"
          class="grid grid-cols-4 border-t py-2 pl-3"
        >
          <li>{{ timeFormat(item.stayDate) }}</li>
          <li>
            每间 <span class="text-primary">{{ item.sellPrice || '-' }}</span>
          </li>
          <li>
            {{ !item.breakfastCount ? '无' : item.breakfastCount }}
            早餐
          </li>
          <li>无</li>
        </ul>
      </div>
    </div>
    <!-- 客人要求 -->
    <div class="bold mt-4 text-lg font-bold">客人要求</div>
    <div>
      <!-- 这里是当订单发生修改的时候或者取消订单的时候显示 -->
      <p class="mt-3 text-xs opacity-60">特殊要求</p>
      <p class="mt-1 text-xs opacity-60">
        您可根据您自身的情况决定是否满足客人要求，尽可能满足客人特殊要求有助于保留订单。
      </p>
      <!-- 下面是不管什么状态都会存在的 -->
      <p class="mt-3 text-xs opacity-60">发票要求</p>
      <p class="mt-1">
        此订单由酒店向客人开具发票，用户在小程序申请开具发票后请尽快处理用户的发票申请，具体开票金额以订单为准。
      </p>
    </div>
    <!-- 平台提示 如果订单为待入住的状态下显示 -->
    <template v-if="data.payStatus !== 0 && [2, 3].includes(data.orderStatus)">
      <div class="bold mt-4 text-lg font-bold">平台提示</div>
      <div class="mt-1">预付：该订单客人已支付房费，请酒店务必保留房间。</div>
    </template>
    <!-- 取消政策 -->
    <div>
      <p class="mt-4 text-xs opacity-60">取消政策</p>
      <div class="card-box mt-2 max-w-[810px] rounded-sm">
        <!-- 表头 -->
        <div class="bg-primary/5 text-666 grid grid-cols-2 py-2 pl-3">
          <span>取消时间</span>
          <span>取消费用</span>
        </div>
        <div class="text-666">
          <ul class="grid grid-cols-2 border-t py-2 pl-3">
            <li>
              北京时间{{ data.checkInDate || '' }}
              {{ data.freeCancelHours || '' }}前
            </li>
            <li>免费</li>
          </ul>
          <ul class="grid grid-cols-2 border-t py-2 pl-3">
            <li>
              北京时间{{ data.checkInDate || '' }}
              {{ data.freeCancelHours || '' }}后
            </li>
            <li>全额</li>
          </ul>
        </div>
      </div>
      <p class="mt-4 text-xs opacity-60">未入住</p>
      <p class="mt-1">如果客人未入住，将根据取消政策进行扣除。</p>
    </div>
    <!-- 确认结果 -->
    <div class="bold mt-4 text-lg font-bold">确认结果</div>
    <div class="mt-1">{{ data.confirmTime ? '已接单' : '未确认' }}</div>
    <!-- 结算流水 -->
    <div class="bold mt-4 text-lg font-bold">结算流水</div>
    <div class="card-box mt-2 max-w-[810px] rounded-sm">
      <!-- 表头 -->
      <div class="bg-primary/5 text-666 grid grid-cols-2 py-2 pl-3">
        <span>结算类型</span>
        <span>结算金额</span>
      </div>
      <div class="text-666">
        <template v-if="data.refundPriceList?.length > 0">
          <div v-for="(item, index) in data.refundPriceList" :key="index">
            <ul v-if="item > 0" class="grid grid-cols-2 border-t py-2 pl-3">
              <li>退款</li>
              <li>RMB -{{ item }}</li>
            </ul>
          </div>
        </template>
        <ul class="grid grid-cols-2 border-t py-2 pl-3">
          <li>正常订单</li>
          <li>RMB {{ data.orgPayAmount || '0' }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.text {
  color: hsl(var(--card-foreground));
}

.text-666 {
  color: hsl(var(--card-foreground) / 60%);
}

:deep(.ant-timeline .ant-timeline-item) {
  padding-bottom: 2px;
}

:deep(.ant-timeline .ant-timeline-item-head) {
  background: none;
}
</style>
